// 导入路由组件
import { useNavigate, useSearchParams } from "react-router";
const Login = () => {
  // 创建命令式导航函数
  const navigate = useNavigate();

  // 接收SearchParams自定义变量传参
  const [query] = useSearchParams();
  console.log("id=", query.get("id"));

  return (
    <>
      {/* 命令导航 */}
      {/* 这里因为路由配置添加了/:name，所以这里需要传参 */}
      <button onClick={() => navigate("/article/zs")}>
        我是Navigatel路由去文章页面
      </button>

      {/* 页面自定义useParams传参 */}
      {/* 需要给路由配置添加/:??? */}
      <button onClick={() => navigate("/article/zs")}>
        useParams页面自由路由传参
      </button>
      {/* 区别：useParams只能接收路由配置中添加的参数，而SearchParams可以接收任意变量传参 */}
    </>
  );
};

export default Login;
